<template>
  <!-- 分页 -->
  <div class="pagination flex-between">
    <div class="number-box">
      <span class="self_total"
        >ALL<span class="num">{{ total }}</span
        >items</span
      >
    </div>
    <el-pagination
      background
      :layout="
        isPhone
          ? 'prev, pager, next,  jumper'
          : 'prev, pager, next, sizes, jumper'
      "
      :current-page="pageNo"
      :page-size="pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      :small="isPhone ? true : false"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  props: {
    pageNo: {
      default: () => 1,
    },
    total: {
      default: () => 100,
    },
    pageSize: {
      default: () => 10,
    },
  },
  data() {
    return {};
  },
  computed: {
    isPhone() {
      return this.$store.state.isPhone;
    },
  },
  methods: {
    handleCurrentChange(pageNo) {
      this.$emit('handleCurrentChange',pageNo)
    },
  },
  mounted() {
    // document.getElementsByClassName(
    //   "el-pagination__jump"
    // )[0].childNodes[0].nodeValue = "go";
    // document.getElementsByClassName(
    //   "el-pagination__jump"
    // )[0].childNodes[2].nodeValue = "page";
  },
};
</script>

<style lang="scss" scoped>
.pagination {
  width: 100%;
  padding: 20px 30px;
}
::v-deep.pagination {
  .self_total {
    margin-right: 0;
    .num {
      min-width: auto !important; // 覆盖element 本来样式
      margin: 0 10px;
    }
  }
}

// 响应式设计
@media screen and (max-width: 768px) {
  ::v-deep.pagination {
    flex-direction: column;
    align-items: center;
    .number-box {
      padding-bottom: 10px;
    }
    .self_total {
      margin-right: 0;
    }
    .el-pagination {
      padding: 0;
    }
  }
}
</style>
